<template>
  <div class="p-20px">
    <el-row :gutter="20">
      <el-col :span="6">
        <PagePanel header="页面看板组件-默认" class="mb-20px">
          <div class="py-70px">内容区域</div>
        </PagePanel>
      </el-col>

      <el-col :span="6">
        <PagePanel header="页面看板组件-网格背景" bgImg="grid" class="mb-20px">
          <div class="py-70px">内容区域</div>
        </PagePanel>
      </el-col>

      <el-col :span="6">
        <PagePanel
          header="页面看板组件-边框效果"
          :border="true"
          class="mb-20px"
        >
          <div class="py-70px">内容区域</div>
        </PagePanel>
      </el-col>

      <el-col :span="6">
        <PagePanel header="页面加载效果" class="mb-20px">
          <cjui-loading-progress :loading="true" modal="full">
            <div class="py-70px">内容区域</div>
          </cjui-loading-progress>
        </PagePanel>
      </el-col>

      <el-col :span="8">
        <PagePanel header="指标列表1" class="mb-20px">
          <QuotasGrid1 :cardList="quotasCardList" class="h-150px" />
        </PagePanel>
      </el-col>

      <el-col :span="8">
        <PagePanel header="指标列表2" class="mb-20px">
          <QuotasGrid2 :cardList="quotasCardList" class="h-150px" />
        </PagePanel>
      </el-col>

      <el-col :span="8">
        <PagePanel header="指标列表3" class="mb-20px">
          <QuotasGrid3 :cardList="quotasCardList" class="h-150px" />
        </PagePanel>
      </el-col>

      <el-col :span="8">
        <PagePanel header="指标器" class="mb-20px h-350px">
          <IndicatorCircle1>
            <template #left>
              <div>LEFT</div>
            </template>

            CENTER

            <template #right>
              <div>RIGHT</div>
            </template>
          </IndicatorCircle1>
        </PagePanel>
      </el-col>

      <el-col :span="16">
        <PagePanel header="装饰" class="mb-20px h-350px">
          <DecorBorderCorner />
          <DecorLineSquare />
        </PagePanel>
      </el-col>

      <el-col :span="6">
        <PieVue class="mb-20px h-300px" />
      </el-col>

      <el-col :span="6">
        <BarVue class="mb-20px h-300px" />
      </el-col>

      <el-col :span="6">
        <LineBar class="mb-20px h-300px" />
      </el-col>

      <el-col :span="6">
        <RadarVue class="mb-20px h-300px" />
      </el-col>

      <el-col :span="24">
        <MapVue class="h-620px mb-20px" />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {
  PagePanel,
  QuotasGrid1,
  QuotasGrid2,
  QuotasGrid3,
  IndicatorCircle1,
  DecorBorderCorner,
  DecorLineSquare,
} from '../components/index'
import PieVue from './Pie.vue'
import BarVue from './Bar.vue'
import LineBar from './LineBar.vue'
import RadarVue from './Radar.vue'
import MapVue from './Map.vue'

const quotasCardList = [
  {
    icon: 'ep:view',
    label: '指标1',
    value: 99,
    unit: '个',
  },
  {
    icon: 'ep:view',
    label: '指标1',
    value: 99,
    unit: '个',
  },
  {
    icon: 'ep:view',
    label: '指标1',
    value: 99,
    unit: '个',
  },
]
</script>
